<template>
  <el-container>
    <el-main class="nopadding">
      <el-table
        :data="cityData"
        height="auto"
        border
        row-key="id"
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="地区名称" prop="areaName" align="left"></el-table-column>
        <el-table-column label="地区简称" prop="shortName" align="center"/>
        <el-table-column label="排序" prop="sort" align="center" />
        <el-table-column label="经度" prop="lng" align="center"/>
        <el-table-column label="维度" prop="lat" align="center"/>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      cityData: [], // 一级城市数据
      parentId: 1, //  上级id
    }
  },
  created() {
    this.getCityData()
  },
  methods: {
    // 获取第一层
    getCityData() {
      this.$API.system.city.get({parentId: this.parentId}).then((res) => {
        this.cityData = res.data
      })
    },
    load(row, node, resolve) {
      console.log(row, node)
      setTimeout(() => {
        this.$API.system.city.get({parentId: row.id}).then((res) => {
          resolve(res.data)
          console.log(res.data, 'node')
        })
      }, 500)
    },

  }
}
</script>

<style scoped>

</style>
